<template>
  <el-drawer
    :title="title"
    :model-value="state.dialogFormVisible"
    :before-close="handleClose"
    size="40%"
    direction="rtl"
    :destroy-on-close="true"
  >
    <template #default>
      <el-descriptions :column="2" :border="true">
        <el-descriptions-item label="业务类型" label-align="right" width="10%"
          >{{ formView.category }}
        </el-descriptions-item>
        <el-descriptions-item label="手机号" label-align="right">
          {{ formView.receiver }}
        </el-descriptions-item>
        <el-descriptions-item label="短信模板ID" label-align="right" :span="2">
          {{ formView.templateId }}
        </el-descriptions-item>
        <el-descriptions-item
          label="短信模板参数"
          label-align="right"
          :span="2"
        >
          {{ formView.templateParams }}
        </el-descriptions-item>
        <el-descriptions-item label="发送时间" label-align="right">
          {{ formView.sendTime }}
        </el-descriptions-item>
        <el-descriptions-item label="发送状态" label-align="right" width="10%">
          <el-tag size="small" v-if="formView.status == 0" type="warning">
            发送失败</el-tag
          >
          <el-tag size="small" v-if="formView.status == 1"> 发送成功</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="短信平台标识" label-align="right">
          {{ formView.platSmsId }}
        </el-descriptions-item>
        <el-descriptions-item label="短信平台状态" label-align="right">
          {{ formView.platStatus }}
        </el-descriptions-item>
        <el-descriptions-item label="短信内容" label-align="right" :span="2">
          {{ formView.sendMessage }}
        </el-descriptions-item>
        <el-descriptions-item label="业务主键" label-align="right" :span="2">
          {{ formView.businessKey }}
        </el-descriptions-item>
      </el-descriptions>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import utils from "../../../utils/utils";
import apiSms from "../api/sms";

// ts 语法，有默认值版本
const props = withDefaults(
  defineProps<{
    title?: string;
  }>(),
  {}
);

const formViewOriginal = () => {
  return {
    smsId: "",
    category: "",
    receiver: "",
    templateId: "",
    templateParams: "",
    sendMessage: "",
    sendTime: "",
    status: 0,
    businessKey: "",
    platSmsId: "",
    platStatus: "",
    createAccountName: "",
    createTime: "",
  };
};
const formView = reactive(formViewOriginal());

const state = reactive({
  dialogFormVisible: false,
});

const emit = defineEmits<{
  (event: "on-close", result: boolean): void;
}>();

const handleClose = (submit: boolean) => {
  // console.log(submit);
  state.dialogFormVisible = false;
  if (submit == true) {
    // 点击确定按钮关闭
    emit("on-close", true);
  }
};

const show = (row: any) => {
  // console.log(row);
  Object.assign(formView, formViewOriginal());
  apiSms
    .getSms(row.smsId)
    .then((response: any) => {
      if (response.data.code == 200) {
        Object.assign(formView, response.data.data);
      }
    })
    .catch((err: any) => {
      utils.errorNotification("数据处理错误", err);
    });

  state.dialogFormVisible = true;
};

defineExpose({
  show,
});
</script>
